<template>
    <div class="report-third-child">
        <div class="report-third-child-title">
            <div style="float:left">
                <div style="line-height:55px;">
                    <span style="color:#212121;font-size:20px;">排行榜</span>
                </div>
            </div>
            <div style="float:right;margin-right:5px;line-height:55px;">
                <div class="chaos-small-button chaos-small-button-active">
                    <span>日榜</span>
                </div>

                <div class="chaos-small-button">
                    <span>三日</span>
                </div>

                <div class="chaos-small-button ">
                    <span>周榜</span>
                </div>
            </div>
        </div>

        <div class="report-third-child-content">
            <hotspotRank v-if="res.length>0" :video-info="res[0]"></hotspotRank>
            <hotspotRank v-if="res.length>1" :video-info="res[1]"></hotspotRank>
            <hotspotRank v-if="res.length>2" :video-info="res[2]"></hotspotRank>
            <div class="hostpot-abridge" v-if="res.length>3">
                <div class="hostpot-abridge-index">
                    4
                </div>
                <span class="show-more-title" @click="doSpick(res[3])">
                    {{res[3].videoTitle}}
                </span>

            </div>
            <div class="hostpot-abridge" v-if="res.length>4">
                <div class="hostpot-abridge-index">
                    5
                </div>
                <span class="show-more-title" @click="doSpick(res[4])">
                    {{res[4].videoTitle}}
                </span>
            </div>
            <div class="hostpot-abridge" v-if="res.length>5">
                <div class="hostpot-abridge-index">
                    6
                </div>
                <span class="show-more-title" @click="doSpick(res[5])">
                    {{res[5].videoTitle}}
                </span>
            </div>
            <div class="hostpot-abridge" v-if="res.length>6">
                <div class="hostpot-abridge-index">
                    7
                </div>
                <span class="show-more-title" @click="doSpick(res[6])">
                    {{res[6].videoTitle}}
                </span>
            </div>
            <div class="hostpot-abridge" v-if="res.length>7">
                <div class="hostpot-abridge-index">
                    8
                </div>
                <span class="show-more-title" @click="doSpick(res[7])">
                    {{res[7].videoTitle}}
                </span>
            </div>
            <div class="hostpot-abridge" v-if="res.length>8">
                <div class="hostpot-abridge-index">
                   9
                </div>
                <span class="show-more-title" @click="doSpick(res[8])">
                    {{res[8].videoTitle}}
                </span>
            </div>
            <div class="hostpot-abridge" v-if="res.length>9">
                <div class="hostpot-abridge-index">
                    10
                </div>
                <span class="show-more-title"  @click="doSpick(res[9])">
                     {{res[9].videoTitle}}
                </span>
            </div>
            <div class="show-more" v-if="res.length>10">
                查看完整榜单 <i class="el-icon-arrow-right"></i>
            </div>
        </div>

    </div>
</template>

<script>
    import hotspotRank from "@/components/reportThird/hotspotRank";

    export default {
        components:{hotspotRank},
        name: 'reportThirdChild',
        props: {
            reportIndex: {   // 可选字段，有默认值
                type: Number
            }
        },
        data () {
            return {
                paigangbangForm:{
                    fenquParent:'',
                    is1day:'1',
                    is3day:'0',
                    is7day:'0'
                },
                res:[]

            }
        },
        methods:{
           doSpick(videoInfo){
               var localStorage = window.localStorage;
               localStorage.setItem("videoPath",videoInfo.videoPath);
               this.$router.push("/chaosVideo");
               //debugger;
           }
        },
        mounted(){
            var self = this;
            if(self.reportIndex===1){
                self.paigangbangForm.fenquParent = "01-fanju";
                //查找动漫区前11的视频
                self.$api.post('paihangbang/getPaihangbangTop11',self.paigangbangForm, result => {
                    self.res = result;
                });
            }
        }
    }
</script>

<style scoped>
    .report-third-child{
        width:324px;
        height:550px;
    }

    .report-third-child-title{
        height:60px;
        width:324px;
    }

    .report-third-child-content{
        height:446px;
        width:324px;
    }

    .chaos-small-button{
        border-radius: 3px;
        width:40px;
        height:28px;
        color:black;
        display: inline-block;
        line-height: 28px;
        white-space: nowrap;
        cursor: pointer;
        -webkit-appearance: none;
        text-align: center;
    }

    .chaos-small-button-active{
        border: 1px solid #fae7e8;
        color: #fd4c5b;
        background: rgba(253,76,91,.1);
    }

    .hostpot-abridge{
        width:324px;
        height:28px;
        line-height:28px;
    }

    .hostpot-abridge-index{
        float:left;
        width:25px;
        text-indent:4px;
        font-size:12px;
        color:#999999;
    }
    .show-more{
        width:324px;
        height:28px;
        line-height:28px;
        text-align:center;
        color:#333333;
        background-color:#EEEEEE;
        margin-top:5px;
        border-radius: 2px;
        cursor:pointer;
    }

    .show-more-title{
        color:#333333;
        font-size:12px;
        cursor:pointer;
    }

    .show-more-title:hover{
        color:#fd4c5a;
    }

</style>
